import React,{useEffect,memo} from 'react'
import { connect } from 'react-redux'
import ShoppingCartHeader from '../../components/cart/shoppingcartheader/ShoppingCartHeader';
import ShoppingCartBottom from '../../components/cart/shoppingcartbottom/ShoppingCartBottom';
import ShoppingCartBottom2 from '../../components/cart/shoppingcartbottom2/ShoppingCartBottom2';
import ShoppingCartItem from '../../components/cart/shoppingcartitem/ShoppingCartItem';
import Scroll from '../../baseUI/scroll'
import *  as actionTypes from './store/actionCreator'
import { Container } from './style'

function ShoppingCart(props) {
  console.log(props,'ShoppingCart');
  const {selectGoods,addcount,subcount,changeSelect,allSelect,isAllSelect,isDelete,deleteState,deleteGoods,settleElement} = props
  useEffect(()=>{
  },[])
  return (
    <Container>
      <ShoppingCartHeader isDelete={isDelete} deleteState={deleteState}/>
      <div className="keep">
      </div>
      <div className="contain">
        <Scroll>
          <div>
          <div className="keep1"></div>
          {
             selectGoods.map((item,index) => {
              return <ShoppingCartItem 
                      key={index} 
                      index={index} 
                      item={item} 
                      addcount={addcount} 
                      subcount={subcount}
                      changeSelect={changeSelect}
              />
             })
          }
          </div>
        </Scroll>
      </div>
      {
        isDelete? 
        <ShoppingCartBottom2 deleteGoods={deleteGoods} isAllSelect={isAllSelect} allSelect={allSelect}/>:
        <ShoppingCartBottom allSelect={allSelect} isAllSelect={isAllSelect} selectGoods={selectGoods} settleElement={settleElement}/>  
      }
    </Container>
  )
}
//连接仓库
const mapStateToProps = (state) => {
  return {
    selectGoods:state.shoppingCart.selectGoods,
    isAllSelect:state.shoppingCart.isAllSelect,
    isDelete: state.shoppingCart.isDelete
  }
}
//修改仓库的数据
const mapStateToDispatch = (dispatch) => {
  return {
    //数量加一
    addcount(index){
      dispatch(actionTypes.setAddCount(index))
    },
    //数量减一
    subcount(index){
      dispatch(actionTypes.setSubCount(index))
    },
    //是否选中
    changeSelect(index){
      dispatch(actionTypes.setChangeSelect(index))
    },
    //是否设置为全选状态
    allSelect(){
      dispatch(actionTypes.setAllSelect())
    },
    //设置是否为删除状态
    deleteState(){
      dispatch(actionTypes.setDeleteState())
    },
    //删除商品
    deleteGoods(){
      dispatch(actionTypes.deleteGoods())
    },
    //结算
    settleElement(sum){
      dispatch(actionTypes.settlement(sum))
    }
  }
}
export default connect(mapStateToProps,mapStateToDispatch)(memo(ShoppingCart))


